Welcome to HTML Tables
- align="left, right, or center" : This tells the browser that the WHOLE table will be on the right, letf, or center of the page.
- bgcolor="#HEX Colour" : This defines the background colour of the table; We'll get into this later
- border="pixels" : Defines the border; we'll get into this later.
- cellpadding="pixels" : Defines the number of pixels inbetween the contents of the cell and the edge.
- cellspacing="pixels" : Defines the number of pixels inbetween the cells and outer edges of the table.
- valign="top, middle, or bottom" : Defines the vertical alignment of the table's contents.
- height="pixels" : This defines the height of the table in pixels.
- width="pixels" : This defines the width of the table in pixels.
- align="left, right, center" : This defines if the caption will be placed in the center of the table, just above it (default), if it will be to the left side of the table, or if it will be to the right side of the table.
- align="center, left, right" : Defines whether the alignment of the data in this row is to the left, right or center.
- bgcolor="#HEX Colour" : Defines the background colour of this row.
- valign="top, middle, bottom" : This defines if the data in the row will be at the bottom, top or middle of the cell.
- align="center, left, right" : Defines whether the alignment of the data in this row is to the left, right or center.
- bgcolor="#HEX Colour" : Defines the background colour of this row.
- valign="top, middle, bottom" : This defines if the data in the row will be at the bottom, top or middle of the cell.
- align="center, left, right" : Defines whether the alignment of the data in this row is to the left, right or center.
- bgcolor="#HEX Colour" : Defines the background colour of this row.
- valign="top, middle, bottom" : This defines if the data in the row will be at the bottom, top or middle of the cell.
- :
[What are Tables?] [Basic Table] [Border Lines] [Tables and Colours]
[Tables in Tables] [Sites in Tables] [Attributes]
[What are Tables?]
[Basic Table]
[Border Lines]
[Tables and Colours]
[Tables in Tables]
[Sites in Tables]
[Attributes]
What are Tables?
Tables are a very good way to organize things. They are similar to frames, but are a bit different. Instead of using frames to create pages like mine (navigation bar, main body), use Sites in Tables. You can place images, use links, text, and other tags inside of tags, though CERTAIN Javascripts will not work in them.
The Basic Table
Tables always are inbetween the <table> and </table> tags. There are many tags used for tables only and also many attributes. Now to the table:
<table>
<caption> Title of Table here </caption>
<tr>
<td> Column 1, Row 1 </td>
<td> Column 2, Row 1 </td>
</tr>
<tr>
<td> Column 1, Row 2 </td>
<td> Column 2, Row 2 </td>
</tr>
</table>
| Coloumn 1, Row 1 | Coloumn 2, Row 1 |
| Coloumn 1, Row 2 | Coloumn 2, Row 2 |
I'm guessing this is not what you wanted exactly. Patience. So now we have some new elements. The <caption> and </caption> tags center a title around the table. The <tr> and </tr> tags start and end new rows. The <td> and </td> tags start and end new columns in the <tr> tags. Now if you want Border Lines, keep reading.
Border Lines
Now this is where you'll get the table you want most likely. I'll show you those fancy border lines you all want to see with the border attribute.
<table border="3">
<caption> Title of Table here </caption>
<tr>
<td> Column 1, Row 1 </td>
<td> Column 2, Row 1 </td>
</tr>
<tr>
<td> Column 1, Row 2 </td>
<td> Column 2, Row 2 </td>
</tr>
</table>
| Coloumn 1, Row 1 | Coloumn 2, Row 1 |
| Coloumn 1, Row 2 | Coloumn 2, Row 2 |
All bet that was what you wanted. All I added was the border="3" attribute. Now if you make 3 a lower number, you will have a thinner border. If you make 3 a higher number, you will have a thicker border.
Tables and Colours
Now some of you want the tables to have coloured backgrounds. Fine and simple. There are 3 ways to do this.
Using the <table> tag:
<table bgcolor="#HEX Colour">
<caption> Title of Table here </caption>
<tr>
<td> Column 1, Row 1 </td>
<td> Column 2, Row 1 </td>
</tr>
<tr>
<td> Column 1, Row 2 </td>
<td> Column 2, Row 2 </td>
</tr>
</table>
| Coloumn 1, Row 1 | Coloumn 2, Row 1 |
| Coloumn 1, Row 2 | Coloumn 2, Row 2 |
This way, you can colour all of the columns and rows the same colour. Notice the bgcolor in the <table> tag. The disadvantage is that you can only have one colour.
<table>
<caption> Title of Table here </caption>
<tr bgcolor="#HEX Colour>
<td> Column 1, Row 1 </td>
<td> Column 2, Row 1 </td>
</tr>
<tr bgcolor="#HEX Colour>
<td> Column 1, Row 2 </td>
<td> Column 2, Row 2 </td>
</tr>
</table>
| Coloumn 1, Row 1 | Coloumn 2, Row 1 |
| Coloumn 1, Row 2 | Coloumn 2, Row 2 |
This way, each of the rows have there own colour. Notice the bgcolor in the <tr> tag. The advantage is that you only have to do it for each row, but still columns in the same row, must be the same colour.
<table>
<caption> Title of Table here </caption>
<tr>
<td bgcolor="#HEX Colour"> Column 1, Row 1 </td>
<td bgcolor="#HEX Colour> Column 2, Row 1 </td>
</tr>
<tr>
<td bgcolor="#HEX Colour> Column 1, Row 2 </td>
<td bgcolor="#HEX Colour> Column 2, Row 2 </td>
</tr>
</table>
| Coloumn 1, Row 1 | Coloumn 2, Row 1 |
| Coloumn 1, Row 2 | Coloumn 2, Row 2 |
Using this way, you can colour each column and row your own way. Notice the bgcolor in the <td> tags. The advantage is that it allows the most flexablity. The disadvantage is that you must put it in EVERY <td> tag.
Tables in Tables
This is pretty straight forward. All you do is follow the regular format. Just say you want a table with thick borders to have a seperate table in each cell with thin borders.
<table border="10">
<caption> Title of Table here </caption>
<tr>
<td>
<table border="3">
<caption> Title of Table here </caption>
<tr>
<td> Column 1, Row 1 </td>
<td> Column 2, Row 1 </td>
</tr>
<tr>
<td> Column 1, Row 2 </td>
<td> Column 2, Row 2 </td>
</tr>
</table>
</td>
<td>
<table border="3">
<caption> Title of Table here </caption>
<tr>
<td> Column 1, Row 1 </td>
<td> Column 2, Row 1 </td>
</tr>
<tr>
<td> Column 1, Row 2 </td>
<td> Column 2, Row 2 </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="3">
<caption> Title of Table here </caption>
<tr>
<td> Column 1, Row 1 </td>
<td> Column 2, Row 1 </td>
</tr>
<tr>
<td> Column 1, Row 2 </td>
<td> Column 2, Row 2 </td>
</tr>
</table>
</td>
<td>
<table border="3">
<caption> Title of Table here </caption>
<tr>
<td> Column 1, Row 1 </td>
<td> Column 2, Row 1 </td>
</tr>
<tr>
<td> Column 1, Row 2 </td>
<td> Column 2, Row 2 </td>
</tr>
</table>
</td>
</tr>
|
|
||||||||
|
|
See how it's done? OK, it looks complicated but look in every <td> and </td> tag in the original table. See that each table starts in stops inbetween those tags?
Sites in Tables
Now this is my personal favorite. Have you wondered how I got the main part of the page to avoid the special marble margin? With a table that has invisible borders. It is very simple and all you need is only 2 cells.
<html>
<head>
<title> Your Title </title>
</head>
<body>
<table>
<tr>
<td width="width of margin in pixels" valign="top">
Here is your smaller navigation bar
</td>
<td width="width of main body" valign="top">
Here is your main body
</td>
</tr>
</table>
</body>
</html>
Attributes and Table Tags
Here is an overview of all the tags with tables and their attributes.
<table> </table>
This tag is the main one. It starts and ends the table and can define much of what it will look like.
<caption> </caption>
This one gives a title for the table centered in the middle of the table just above where it starts.
<tr> </tr>
This tag is the one which starts new rows.
<th> </th>
This tag is almost the same as the <td> tag. But this one, makes it a header cell, which normally has a bold font for the text.
<td> </td>
This tag is the one who defines the columns in each row.